<div class="layui-fluid">
    <div class="layui-tab layui-tab-card">
        <ul class="layui-tab-title">
            <li class="layui-this">增值税发票虚开预测-专家经验模式</li>
            <li>增值税发票虚开预测-机器学习模式</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-row layui-col-space15">
                    <!--    <div class="layui-col-md8">-->
                    <!--      <div class="layui-row layui-col-space15">-->

                    <div class="layui-col-md6">

                        <div class="layui-card">
                            <div class="layui-card-header">高风险虚开企业名单</div>
                            <div class="layui-card-body">
                                <table id="test-table-xk" lay-filter="test-table-xk"></table>
                                <script type="text/html" id="zizeng">
                                    {{d.LAY_TABLE_INDEX+1}}
                                </script>
                            </div>

                        </div>
                    </div>
                    <!--      </div>-->
                    <!--    </div>-->

                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">高风险虚开企业详情</div>
                            <div class="layui-card-body ">
                                <div id="cy" style="height: 450px;width: 100%;display: block"></div>

                            </div>
                        </div>


                    </div>

                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-row layui-col-space15">
                    <!--    <div class="layui-col-md8">-->
                    <!--      <div class="layui-row layui-col-space15">-->

                    <div class="layui-col-md6">

                        <div class="layui-card">
                            <div class="layui-card-header">高风险虚开企业名单</div>
                            <div class="layui-card-body">
                                <table id="test-table-xk2" lay-filter="test-table-xk"></table>
                                <script type="text/html" id="zizeng2">
                                    {{d.LAY_TABLE_INDEX+1}}
                                </script>
                            </div>

                        </div>
                    </div>
                    <!--      </div>-->
                    <!--    </div>-->

                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">高风险虚开企业详情</div>
                            <div class="layui-card-body ">
                                <div id="cy2" style="height: 450px;width: 100%;display: block"></div>

                            </div>
                        </div>


                    </div>

                </div>
            </div>
        </div>
    </div>

</div>


<script>
    //加载 controller 目录下的对应模块
    /*

      小贴士：
        这里 console 模块对应 的 console.js 并不会重复加载，
        然而该页面的视图则是重新插入到容器，那如何保证能重新来控制视图？有两种方式：
          1): 借助 layui.factory 方法获取 console 模块的工厂（回调函数）给 layui.use
          2): 直接在 layui.use 方法的回调中书写业务代码，即:
              layui.use('console', function(){
                //同 console.js 中的 layui.define 回调中的代码
              });

      这里我们采用的是方式1。其它很多视图中采用的其实都是方式2，因为更简单些，也减少了一个请求数。

    */
    function search(obj) {
        // 获取虚开数据

        var data;
        $.ajax({
            url: layui.setter.hostAddr + `/portal/sql/select`,
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(obj),
            async: false,
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("Authorization", layui.data('layuiAdmin').Authorization);
                // XMLHttpRequest.setRequestHeader("Content-Type", "application/json");
            },
            type: 'POST',
            success: function (res) {
                data = res.data
                // doSuccess()
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                //通常情况下textStatus和errorThrown只有其中一个包含信息
                console.log(textStatus);   //调用本次ajax请求时传递的options参数
                console.log(errorThrown);   //调用本次ajax请求时传递的options参数
                doFail()
            }

        })
        return data
    }

    var sqlobj = {
        "sql": "select  DISTINCT on (nsrsbh,nsrmc) nsrsbh,nsrmc,ROW_NUMBER() OVER (ORDER BY nsrsbh ASC) AS rownum from xcdw_app.app_xkyc_fxnsrtzz where ssyf between '202010' and  '202012'  ",
        // "sql": "select  DISTINCT on (nsrsbh,nsrmc) nsrsbh,nsrmc,ROW_NUMBER() OVER (ORDER BY nsrsbh ASC) AS rownum from xcdw_app.app_xkyc_fxnsrtzz where ssyf between '202010' and  '202012' and nsrmc like '%'||#{keyword}||'%' ",
        // "keyword": "木业"
    }
    data = search(sqlobj)
    var tzobj, currentNsr;


    layui.use(['admin', 'table'], function () {
        var table = layui.table;

        table.render({
            elem: '#test-table-xk'
            // , url: './json/table/user.js'
            , data: data
            , page: true
            // ,cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {field: 'zizeng', width: 80, title: '序号', type: 'numbers', fixed: 'left', templet: '#zizeng'}
                , {field: 'nsrsbh', title: '纳税人识别号', event: 'setnsrsbh', style: 'cursor: pointer;'}
                // , {field: 'nsrsbh', title: '纳税人识别号',templet: '<div><a href="javascript:;" class="layui-table-link">{{d.nsrsbh}}</a></div>'}
                , {field: 'nsrmc', title: '纳税人名称'}
            ]]
            , height: 450
        });
        var insertStr = (soure, start, newStr) => {
            return soure.slice(0, start) + newStr + soure.slice(start)
        }


        //监听单元格事件
        table.on('tool(test-table-xk)', function (obj) {
            debugger
            var data = obj.data;
            var elementsLis = []
            if (obj.event === 'setnsrsbh') {
                var nsrobj = {
                    'sql': `select  fxtzz from xcdw_app.app_xkyc_fxnsrtzz where ssyf between '202010' and  '202012' and nsrsbh = '${data.nsrsbh}'`,
                    "keyword": ""
                }
                currentNsr = data.nsrmc
                tzobj = search(nsrobj)
                console.log(tzobj)
                elementsLis.push({data: {id: currentNsr,label:currentNsr,size: 120}})
                for (let i = 0; i < tzobj.length; i++) {
                    debugger
                    var label;
                    var fxtzz_ = tzobj[i]['fxtzz']
                    var num = Math.floor(fxtzz_.length / 15)
                    var testStr = "蚂蚁部落";
                    // label换行
                    if (num > 0) {
                        for (let j = 0; j < num; j++) {
                            var position = (j + 1) * 15
                            if (j === 0) {
                                label = insertStr(fxtzz_, position, " ")
                            } else {
                                label = insertStr(label, position, " ")
                            }

                        }
                    }

                    elementsLis.push({
                        data: {id: fxtzz_, label: label,size: 120},
                        classes: 'tzz'
                    })
                    elementsLis.push({
                        data: {
                            id: currentNsr + fxtzz_,
                            source: currentNsr,
                            target: fxtzz_
                        }
                    })

                }

            }
            var cy = cytoscape({
                // initial viewport state:
                zoom: 1, // 图表的初始缩放级别.可以设置options.minZoom和options.maxZoom设置缩放级别的限制.
                pan: {x: 0, y: 0}, // 图表的初始平移位置.
                // interaction options:
                minZoom: 1e-50, // 图表缩放级别的最小界限.视口的缩放比例不能小于此缩放级别.
                maxZoom: 1e50, // 图表缩放级别的最大界限.视口的缩放比例不能大于此缩放级别.
                zoomingEnabled: true, // 是否通过用户事件和编程方式启用缩放图形.
                userZoomingEnabled: true, // 是否允许用户事件(例如鼠标滚轮,捏合缩放)缩放图形.对此缩放的编程更改不受此选项的影响.
                panningEnabled: true, // 是否通过用户事件和编程方式启用平移图形.
                userPanningEnabled: true, // 是否允许用户事件(例如拖动图形背景)平移图形.平移的程序化更改不受此选项的影响.
                boxSelectionEnabled: false, // 是否启用了框选择(即拖动框叠加,并将其释放为选择).如果启用,则用户必须点击以平移图表.
                selectionType: 'additive', // 一个字符串，指示用户输入的选择行为.对于'additive',用户进行的新选择将添加到当前所选元素的集合中.对于'single',用户做出的新选择成为当前所选元素的整个集合.
                touchTapThreshold: 8, // 非负整数,分别表示用户在轻击手势期间可以在触摸设备和桌面设备上移动的最大允许距离.这使得用户更容易点击.
                                      // 这些值具有合理的默认值,因此建议不要更改这些选项,除非您有充分的理由这样做.大值几乎肯定会产生不良后果。
                desktopTapThreshold: 4, // 非负整数,分别表示用户在轻击手势期间可以在触摸设备和桌面设备上移动的最大允许距离.这使得用户更容易点击.
                                        // 这些值具有合理的默认值,因此建议不要更改这些选项,除非您有充分的理由这样做.大值几乎肯定会产生不良后果。
                autolock: false, // 默认情况下是否应锁定节点(根本不可拖动,如果true覆盖单个节点状态).
                autoungrabify: false, // 默认情况下节点是否不允许被拾取(用户不可抓取,如果true覆盖单个节点状态).
                autounselectify: false, // 默认情况下节点是否允许被选择(不可变选择状态,如果true覆盖单个元素状态).
                // rendering options:
                headless: false, // true:空运行,不显示不需要容器容纳.false:显示需要容器容纳.
                styleEnabled: true, // 一个布尔值,指示是否应用样式.
                hideEdgesOnViewport: true, // 渲染提示,设置为true在渲染窗口时,不渲染边.例如,移动某个顶点时或缩放时,边信息会被临时隐藏,移动结束后,边信息会被执行一次渲染.由于性能增强,此选项现在基本上没有实际意义.
                hideLabelsOnViewport: true, // 渲染提示,当设置为true使渲染器在平移和缩放期间使用纹理而不是绘制元素时,使大图更具响应性.由于性能增强,此选项现在基本上没有实际意义.
                textureOnViewport: true, // 渲染提示,当设置为true使渲染器在平移和缩放期间使用纹理而不是绘制元素时,使大图更具响应性.由于性能增强,此选项现在基本上没有实际意义.
                motionBlur: true, // 渲染提示,设置为true使渲染器使用运动模糊效果使帧之间的过渡看起来更平滑.这可以增加大图的感知性能.由于性能增强,此选项现在基本上没有实际意义.
                motionBlurOpacity: 0.2, // 当motionBlur:true,此值控制运动模糊帧的不透明度.值越高,运动模糊效果越明显.由于性能增强,此选项现在基本上没有实际意义.
                wheelSensitivity: 1, // 缩放时更改滚轮灵敏度.这是一个乘法修饰符.因此,0到1之间的值会降低灵敏度(变焦较慢),而大于1的值会增加灵敏度(变焦更快).
                pixelRatio: 'auto', // 使用手动设置值覆盖屏幕像素比率(1.0建议,如果已设置).这可以通过减少需要渲染的有效区域来提高高密度显示器的性能,
                                    // 尽管在最近的浏览器版本中这是不太必要的.如果要使用硬件的实际像素比,可以设置pixelRatio: 'auto'(默认).
                container: document.getElementById('cy'),

                elements: elementsLis,

                style: [ // the stylesheet for the graph
                    {
                        selector: 'node',
                        style: {
                            'background-color': '#3d87d1',
                            "font-size":40,
                            "size": 120,
                            "width":100,
                            "height":100
                            // "height":40
                            // 'label': 'data(id)',
                            // 'text-max-width': 10
                        }
                    },
                    {
                        "selector": "node[label]",
                        "style": {
                            "label": "data(label)"
                        }
                    },
                    {
                        "selector": ".tzz",
                        "style": {
                            "font-size":40,
                            "text-valign": "bottom",
                            "text-halign": "center",
                            "text-wrap": "wrap",
                            "text-max-width": 80
                        }
                    },

                    {
                        selector: 'edge',
                        style: {
                            'width': 3,
                            'line-color': '#ccc',
                            'target-arrow-color': '#ccc',
                            'target-arrow-shape': 'triangle',
                            'curve-style': 'bezier'
                        }
                    }
                ],

                layout: {
                    name: 'circle',
                    radius: 500
                    // rows: 1
                }

            })
            cy.on('tap', 'node', function (evt) {
                var node = evt.target;
                console.log('点击 ' + node.id());
            });
            console.log(JSON.stringify(elementsLis))
        });
    });


    var cy = cytoscape({
        container: document.getElementById('cy'),
        elements: [ // list of graph elements to start with
            { // node a
                data: {id: 'aaaaaaaaaaaa aaaaaaaaaaaaa'},
                classes: 'top-left'
            },
            { // node b
                data: {id: 'bbbbbbbbbbbbbbbbbbbbbbbbb'}
            },
            { // edge ab
                data: {id: 'ab', source: 'aaaaaaaaaaaa aaaaaaaaaaaaa', target: 'bbbbbbbbbbbbbbbbbbbbbbbbb'}
            }
        ],

        style: [
            {
                selector: 'node',
                style: {
                    'label': 'data(id)',
                    'text-valign': 'center',
                    'color': "white",
                    'text-outline-color': '#3d87d1',
                    'text-outline-width': 2,
                    'background-color': '#3d87d1',
                }
            },
            {
                "selector": ".top-left",
                "style": {
                    "text-valign": "bottom",
                    "text-halign": "center",
                    "text-wrap": "wrap",
                    "text-max-width": 80
                }
            },

            {
                selector: 'edge',
                style: {
                    'width': 2,
                    'line-color': 'grey',
                }
            },

            {
                selector: 'node.highlight',
                style: {
                    'label': 'data(name)',
                    'text-valign': 'center',
                    'color': "white",
                    'text-outline-color': 'red',
                    'text-outline-width': 2,
                    'background-color': 'red',
                }
            },

            {
                selector: 'node.semitransp',
                style: {'opacity': '0.5'}
            },

        ],

        layout: {
            name: 'grid',
            rows: 1
        }

    })
    layui.use('console', layui.factory('console'));
</script>

